<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义了多根轴线的对齐方式</title>
	<style type="text/css">
			.content {
				display: flex;
				width: 100%;
				/* flex-wrap: wrap; */
				align-content: space-around;
				/* 
				flex-start：与交叉轴的起点对齐。
				flex-end：与交叉轴的终点对齐。
				center：与交叉轴的中点对齐。
				space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
				space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
				stretch（默认值）：轴线占满整个交叉轴。
				 */
			}
	
			.item {
				width: 20%;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素2
			</div>
			<div class="item">
				子元素3
			</div>
			<div class="item">
				子元素4
			</div>
			<div class="item">
				子元素5
			</div>
		</div>
	</body>
</html>
